/**
 *  分页插件编写
 * @author xiaoxujs
 */

import { FC, useEffect, useState } from "react";
import { PaginationXBox } from "./style";

const PaginationX: FC<{
    current: number, // 当前页码
    pageSize: number, // 每页显示条数
    total: number, // 总条数
    onChange: (current: number, pageSize: number) => void, // 页码改变的回调

}> = ({
    current, // 当前页码
    pageSize, // 每页显示条数
    total, // 总条数
    onChange, // 页码改变的回调
}) => {
        const [liList, setliList] = useState<number[]>([]);
        useEffect(() => {
            let liArr: number[] = [];
            let num = Math.ceil(total / 10); // 计算出有多少个li
            for (let i = 1; i <= num; i++) { // 循环创建li
                liArr.push(i); // 把li添加到数组中
            }
            console.log(liArr)
            console.log(current)
            // 获取有多少li
            if (num >= 6) { // 大于60条就有六个以上就要滚动
                // 获取所有的li
                console.log(liArr.length - num) // 最大数 - 当前页 大于2 并且num >2 就截取前两个和后两个
                if (num - current > 2 && current > 2) { // 大于2 并且num >2 就截取前两个和后两个
                    liArr = liArr.slice(current - 3, current + 3); // 截取前两个和后两个
                } else if (num - current <= 2) {// 截取后五个
                    liArr = liArr.slice(num - 5); // 截取后五个
                } else if (current <= 2) {
                    liArr = liArr.slice(0, 5); // 截取前五个
                }
                setliList(liArr);
            } else { //小于六十直接显示

                setliList(liArr); // 设置li列表
            }

        }, [current, total])
        const handleQianjinhoutui = (type: '前进' | '后退') => {
            if (type === '前进') { // 前进
                if (current < Math.ceil(total / 10)) { // 小于最大页数就加一
                    onChange(current + 1, pageSize); // 页码改变的回调
                }
            } else { // 后退
                if (current > 1) { // 大于1就减一
                    onChange(current - 1, pageSize); // 页码改变的回调
                }
            }
        }
        return <PaginationXBox>
            <div className="tiaoshu">一共{total}条</div>
            <div className="qianjinhoutui" onClick={() => handleQianjinhoutui('后退')}>
                <span className="iconfont zuozhuan">&#xe616;</span>
            </div>

            <ul className="pagination_ul">
                {
                    Math.ceil(total / 10) > 6 && current > 3 ? <li className="prev" onClick={() => onChange(current - 1, pageSize)}>···</li> : null
                }
                {
                    liList.map((item, index) => <li className={current === item ? 'active' : ''} key={item} onClick={() => onChange(item, pageSize)} >{item}</li>)
                }
                {
                    Math.ceil(total / 10) > 6 && current < Math.ceil(total / 10) - 2 ? <li className="next" onClick={() => onChange(current + 1, pageSize)}>···</li> : null
                }
            </ul>
            <div className="qianjinhoutui" onClick={() => handleQianjinhoutui('前进')}>
            <span className="iconfont youzhuan">&#xe616;</span>
            </div>

        </PaginationXBox>;
    }


export default PaginationX;